* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: block;
  content: '';
  background-image: url('./../images/bg2.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  /*filter: blur(2px) brightness(0.8);*/
}

.main {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

.row {
  display: flex;
  position: relative;
  width: 100%;
}

.row:not(:last-child) {
  margin-bottom: 1px;
}

.row .row-item {
  position: relative;
  flex: 1 1 20%;
  color: #fff;
  font-size: 2rem;
  background-color: rgba(255, 255, 255, 0.2);
}

.row .row-item.low {
  color: #666;
}

.row .row-item.red {
  color: red;
}

.row .row-item.hotpink {
  color: hotpink;
}

.row .row-item:not(:last-child) {
  margin-right: 1px;
}

.row .row-item .item-roman {
  overflow: hidden;
  width: 100%;
  padding-bottom: 100%;
}

.row .row-item .item-roman::before {
  position: absolute;
  top: 0;
  left: 0;
  content: attr(roman);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: black;
  font-weight: bolder;
  font-size: 2rem;
  opacity: 0.7;
}

.row .row-item .item-texts {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform-style: preserve-3d;
  perspective: 200px;
  transform-origin: center;
}

.row .row-item:hover {
  z-index: 99;
}

.row .row-item:hover .item-texts div.a {
  animation: showA 1.5s ease-out forwards;
  -webkit-animation: showA 1.5s ease-out forwards;
}
@keyframes showA {
  0% {
    transform: rotateY(0) translateZ(0);
  }

  30% {
    transform: rotateY(0) translateZ(15px);
  }

  60% {
    transform: rotateY(-180deg) translateZ(15px);
  }

  100% {
    transform: rotateY(-180deg) translateZ(0);
  }
}
@-webkit-keyframes showA {
  0% {
    -webkit-transform: rotateY(0) translateZ(0);
  }

  30% {
    -webkit-transform: rotateY(0) translateZ(15px);
  }

  60% {
    -webkit-transform: rotateY(-180deg) translateZ(15px);
  }

  100% {
    -webkit-transform: rotateY(-180deg) translateZ(0);
  }
}


.row .row-item:hover .item-texts div.b {
  animation: showB 1.5s ease-out forwards;
  -webkit-animation: showB 1.5s ease-out forwards;
}
@keyframes showB {
  0% {
    transform: rotateY(-180deg) translateZ(0);
  }

  30% {
    transform: rotateY(-180deg) translateZ(10px);
  }

  60% {
    transform: rotateY(-360deg) translateZ(10px);
  }

  100% {
    transform: rotateY(-360deg) translateZ(0);
  }
}
@-webkit-keyframes showB {
  0% {
    -webkit-transform: rotateY(-180deg) translateZ(0);
  }

  30% {
    -webkit-transform: rotateY(-180deg) translateZ(10px);
  }

  60% {
    -webkit-transform: rotateY(-360deg) translateZ(10px);
  }

  100% {
    -webkit-transform: rotateY(-360deg) translateZ(0);
  }
}


.row .row-item .item-texts > div {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  font-weight: bolder;
}


.row .row-item .item-texts > div.a {
  background-color: rgba(214, 182, 171, 0.8);
  animation: hideA 1.5s ease-out forwards;
  -webkit-animation: hideA 1.5s ease-out forwards;
}
@keyframes hideA {
  0% {
    transform: rotateY(-180deg) translateZ(0);
  }

  30% {
    transform: rotateY(-180deg) translateZ(15px);
  }

  60% {
    transform: rotateY(0) translateZ(15px);
  }

  100% {
    transform: rotateY(0) translateZ(0);
  }
}
@-webkit-keyframes hideA {
  0% {
    -webkit-transform: rotateY(-180deg) translateZ(0);
  }

  30% {
    -webkit-transform: rotateY(-180deg) translateZ(15px);
  }

  60% {
    -webkit-transform: rotateY(0) translateZ(15px);
  }

  100% {
    -webkit-transform: rotateY(0) translateZ(0);
  }
}


.row .row-item .item-texts > div.b {
  background-color: rgba(206, 235, 253, 0.8);
  animation: hideB 1.5s ease-out forwards;
  -webkit-animation: hideB 1.5s ease-out forwards;
}
@keyframes hideB {
  0% {
    transform: rotateY(-360deg) translateZ(0);
  }

  30% {
    transform: rotateY(-360deg) translateZ(10px);
  }

  60% {
    transform: rotateY(-180deg) translateZ(10px);
  }

  100% {
    transform: rotateY(-180deg) translateZ(0);
  }
}
@-webkit-keyframes hideB {
  0% {
    -webkit-transform: rotateY(-360deg) translateZ(0);
  }

  30% {
    -webkit-transform: rotateY(-360deg) translateZ(10px);
  }

  60% {
    -webkit-transform: rotateY(-180deg) translateZ(10px);
  }

  100% {
    -webkit-transform: rotateY(-180deg) translateZ(0);
  }
}